import React from "react"
import './ResizeBar.less'
import { inject, observer, Observer } from 'mobx-react';
import mainStore from "../../store/MainStore";
export interface IResizeBarProps{
  horizontal?:boolean
  target:React.RefObject<any>
  minSize?:number
  maxSize?:number
  position?:'left'|'right'|'top'|'bottom'
}


export default ( props:IResizeBarProps )=>{
  const currentStyle = {
    width: props.horizontal?'100%':'8px',
    height: props.horizontal?'8px':'100%',
    cursor: props.horizontal?'ns-resize':'ew-resize'
    
  }
  if(props.position == 'left'){
    currentStyle['right'] = '-8px'
  }else if(props.position == 'bottom'){
    currentStyle['top'] = '-8px'
  }else if(props.position == 'right'){
    //0px  bar在右侧时，左侧会挡住左侧内容滚动条
    currentStyle['left'] = '0px'
  }else if(props.position == 'top'){
    currentStyle['bottom'] = '-8px'
  }
  const [style, setStyle] = React.useState({...currentStyle})
  
  const [size, setSize] = React.useState(0)
  // 初始大小
  const initializeSize = React.useRef(0)
  const clickPosition = React.useRef(0)
  const isResizing = React.useRef(false)
  const minSize = React.useRef(props.minSize || 100)
  const maxSize = React.useRef(props.maxSize || 1000)
  // const target = props.target;
  // if( target.current ){
  //   const rect = target.current.getBoundingClientRect();
  //   if( props.horizontal ){
  //     setSize(rect.height)
  //   }else{
  //     setSize(rect.width)
  //   }
  // }
  const handleMouseDown = (e) => {
    isResizing.current = true
    mainStore.setCursorStyle(props.horizontal?'ns-resize':'ew-resize')
    const targetElement = props.target.current;
    if( !targetElement ) return;
    initializeSize.current = targetElement.getBoundingClientRect()[props.horizontal?'height':'width']
    clickPosition.current = props.horizontal? e.clientY : e.clientX;
    console.log('initializeSize', initializeSize.current)
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (e) => {
    const targetElement = props.target.current;
    console.log('target', targetElement, isResizing.current, 'horizontal=',props.horizontal)
    if (!isResizing.current || !targetElement ) return;
    let offsetHeight = 0
    if (!props.horizontal ) {
      // 水平调整
      if( props.position == 'left' ){
        offsetHeight = e.clientX - clickPosition.current;
      }else if(props.position == 'right'){
        offsetHeight = clickPosition.current - e.clientX;
      }
      updateSize(initializeSize.current + offsetHeight)
    } else if (props.horizontal) {
      // 垂直调整
      if( props.position == 'bottom' ){
        offsetHeight = clickPosition.current - e.clientY;
      }else if(props.position == 'top'){
        offsetHeight = e.clientY - clickPosition.current;
      }
      updateSize(initializeSize.current + offsetHeight)
    }
  };

  const handleMouseUp = () => {
    isResizing.current = false;
    mainStore.setCursorStyle('')
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };
  const updateSize = (size:number)=>{
    size = Math.max(Math.min(size, maxSize.current),minSize.current);
    const targetElement = props.target.current;
    console.log('targetElement', targetElement,'size',size)
    if( targetElement ){
      targetElement.style.cssText =`${props.horizontal?'height':'width'}:${size}px`
    }
    setSize(size)

  }

  console.log('size',size)
  return (<>
    <div className="resizer" style={style} onMouseDown={(e)=>{
      handleMouseDown(e)
    }}></div>
  </>)
}
